<template>
  <div id="home-contact" class="component">
    <div id="home-contact-main" class="ptop">
      <div class="slogen"></div>
      <div class="contacts-main">
        <!--圆形区域-->
        <transition name="circleMove">
          <div class="contacts-wrap" v-if="isShow">
            <div class="contacts-left-wrap circleContainer" id="contacts-left">
              <contactComponent :circleInfo="contactsList.left"></contactComponent>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
  import contactComponent from '@/components/home/contactcircle.vue';
  export default {
    data () {
      return {
        contactsList: {
          left: {src: require('@/assets/home/contact_pic.png')}
        }
      }
    },
    props: {
      isShow: {
        type: Boolean  // 触发显示隐藏动画
      },
      msg: {
        type: String  // 测试数据
      }
    },
    components: {
      contactComponent  // 圆形组件
    },
    methods: {
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #home-contact
    position: relative
    background-image: url('../../assets/home/home-bg5.png')
    #home-contact-main
      .slogen
        background-image: url("../../assets/home/contact.png")
      .contactsMsg
        width 200px
        height 50px
        line-height 50px
        color:#fff
        display inline-block
        margin-left: -220px
        margin-top: 170px
        background-color rgba(0, 0, 0, .5)
        .arrow
         font-family: "SimSun"
         font-size: 16px
         font-weight: 700
         margin-left: 20px
      .contacts-main
        position: relative
        margin:0 auto
        top: 40%
        max-width: 1200px
        .contacts-wrap
          position relative
          width:100%
          transition: all .7s ease-in
          &.circleMove-enter-active
            .circleContainer
              opacity:1
            .circle-top-wrap
              transition-delay: 0.1s
            .circle-top-left,.circle-top-right
              transition-delay: 0.1s
          &.circleMove-enter,&.circleMove-leave-active

            .contacts-top-wrap // 动画效果
              top: 30px
              left: 0%
              opacity:0
            .contacts-left-wrap
              top: 0
              left: 0%
              opacity:0
            .contacts-right-wrap
              top: 30px
              left: 52%
              opacity:0
            .contacts-right2-wrap
              top: 30px
              left: 78%
              opacity:0
          &>div
            position: absolute
            transition:all 0.5s
            opacity: 1
            transition-timing-function: cubic-bezier(0, .57, .44, 1.97)

          .contacts-top-wrap // 改动方向
            top: 0px
            left: 0%
            transition:all 1s
            transition-delay: 0.2s
          .contacts-left-wrap
            top: 0px;
            left: 0%;
            transition:all 1s
            transition-delay: 0.2s
          .contacts-right-wrap
            top: 0px
            left: 52%;
            transition:all 1s;
            transition-delay: 0.2s
          .contacts-right2-wrap
            top: 0px
            left: 78%
            transition:all 1s;
            transition-delay: 0.2s
</style>
